<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市列表</title>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <ul id="citys"></ul>
</body>
<script>
    $.ajax({url:'http://localhost:8088'}).then(res=>{
        var data = JSON.parse(res).locality;
        var provinces = data.provinces[0].province;
        var citys = data.citys[0].city;
        console.log(data);
        for(var i in provinces){

            var li = document.createElement('li');
            li.innerHTML = provinces[i].$.text;

            var ul = document.createElement('ul');
            for(var j in citys){
                if(citys[j].$.pid === provinces[i].$.id){
                    var ll = document.createElement('li');
                    ll.innerHTML = citys[j].$.name;
                    ul.append(ll);
                }
            }
            li.append(ul);

            $('#citys').append(li);
        }
    });
</script>
</html>